<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">

#menu
{
	width:1163px;
	height:38px;
	}
#menu li
{ float:left;
   width:200px;
	height:38px;
	line-height:38px;
	text-align:center;
	list-style:none;
	}	
#menu li a
 {text-align:center;
    color:#000;
	text-decoration:none;
	padding-top:4px;
	width:95px;
	height:20px;
	color:#F3F;
	}	
#menu li a:hover
{
	color:#0F6;}
.menu{
		width: 200px;
		background:url(images/943220aagw1e1vmqwei15g.gif);		
		position: absolute;
		display: none;
		}
.inner{
	background:#6FF;	}
	

</style>
<script type="text/javascript">
<script type="text/javascript">
     function xianshi1()
	 {
		 document.getElementById("cd1").style.display = "block" ;
	 }
	function yincang1()
	{
		 document.getElementById("cd1").style.display="none";
	}
	function xianshi2()
	 {
		 document.getElementById("cd2").style.display= "block" ;
		 }
	function yincang2()
	{
		 document.getElementById("cd2").style.display="none";	 
		}
	function xianshi3()
	 {
		 document.getElementById("cd3").style.display = "block" ;
		 }
	function yincang3()
	{
		 document.getElementById("cd3").style.display="none";
	}
	function xianshi4()
	 {
		 document.getElementById("cd4").style.display= "block" ;
		 }
	function yincang4()
	{
		 document.getElementById("cd4").style.display="none";	 
		}	
	function xianshi5()
	 {
		 document.getElementById("cd5").style.display= "block" ;
		 }
	function yincang5()
	{
		 document.getElementById("cd5").style.display="none";	 
		}				 
</script>	

</script>
  </head>
  
  <body>
 <div id="menu">
           <ul><li class="a" onmouseover="xianshi1()" onmouseout="yincang1()">
   <a href="#"><b>熹妃甄嬛</b></a>
    <div id="cd1" class="menu">
       <div class="inner">
       <ul>
         <li><a href="">家庭背景</a></li>
         <li><a href="">人物命运</a></li>
         <li><a href="">人物评价</a></li>
         </ul>
        </div>
        </div>
     </li>   
<li class="a" onmouseover="xianshi2()" onmouseout="yincang2()">
   <a href="#"><b>皇后宜修</b></a>
    <div id="cd2" class="menu">
       <div class="inner">
       <ul>
         <li><a href="">家庭背景</a></li>
         <li><a href="">人物命运</a></li>
         <li><a href="">人物评价</a></li>
         </ul>
        </div>
        </div>
     </li>
<li class="a" onmouseover="xianshi3()" onmouseout="yincang3()">
   <a href="#"><b>华妃年世兰</b></a>
    <div id="cd3" class="menu">
       <div class="inner">
       <ul>
         <li><a href="">家庭背景</a></li>
         <li><a href="">人物命运</a></li>
         <li><a href="">人物评价</a></li>
         </ul>
        </div>
        </div>
     </li>    
 <li class="a" onmouseover="xianshi4()" onmouseout="yincang4()">
   <a href="#"><b>惠妃沈眉庄</b></a>
    <div id="cd4" class="menu">
       <div class="inner">
       <ul>
         <li><a href="">家庭背景</a></li>
         <li><a href="">人物命运</a></li>
         <li><a href="">人物评价</a></li>
         </ul>
        </div>
        </div>
     </li>    
 <li class="a"onmouseover="xianshi5()" onmouseout="yincang5()">
   <a href="#"><b>鹂妃安陵容</b></a>
    <div id="cd5" class="menu">
       <div class="inner">
       <ul>
         <li><a href="">家庭背景</a></li>
         <li><a href="">人物命运</a></li>
         <li><a href="">人物评价</a></li>
         </ul>
        </div>
        </div>
     </li>                          
           </ul>
           </div>

  </body>
</html>
